<script setup lang="ts">
import { getVisitTimestamp } from '@/api/log';
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import type { VisitTimes } from '@/api/log/type';
import { ElText } from 'element-plus';

type EChartsOption = echarts.EChartsOption;
var option: EChartsOption;
const visitTImes = ref({} as VisitTimes);

onMounted(() => {
    // getVisitTimestamp().then((res) => {
    //     visitTImes.value = res.data as VisitTimes;
    //     init();
    // });
})

const init = () => {
    var chartDom = document.getElementById('main')!;
    var myChart = echarts.init(chartDom);
    option = {
        xAxis: {
            type: 'category',
            data: visitTImes.value.date,
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: visitTImes.value.count,
                type: 'line',
                smooth: true,
                label: {
                    show: false,
                    position: 'bottom',
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            }
        ]
    };
    myChart.setOption(option);

}
</script>

<template>
    <div class="container">
        <div class="text">
            <el-text style="font-size: 15px;font-weight: bolder;">访问量</el-text>
        </div>
        <div class="canvas">
            <div id="main"></div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    width: 88%;
    height: 94%;
    background-color: white;
    padding-left: 3%;
    padding-right: 3%;
    margin: 3%;
    margin-left: 0px;
    display: flex;
    flex-direction: column;
    .text {
        height: 10%;
        display: flex;
        margin: 0px;
        padding: 0px;
    }
    .canvas {
        height: 90%;
        width: 100%;
        #main {
            display: flex;
            width: 100%;
            height: 100%;
        }
    }
}
</style>